<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Film Info</title>
    <link rel="stylesheet" href="../../../script/easyui/themes/icon.css" th:href="@{/script/easyui/themes/icon.css}" />
    <link rel="stylesheet" href="../../../script/easyui/themes/metro/easyui.css" th:href="@{/script/easyui/themes/metro/easyui.css}" />
    <script src="../../../script/jquery-2.1.4.min.js" th:src="@{/script/jquery-2.1.4.min.js}"></script>
    <script src="../../../script/easyui/jquery.easyui.min.js" th:src="@{/script/easyui/jquery.easyui.min.js}"></script>
    <script src="../../../script/film.js" th:src="@{/script/film.js}"></script>
    <script th:inline="javascript">
    /*<![CDATA[*/
   		$(function(){ 	 	  
		  $('table').datagrid({
		      url: /*[['viewFilm']]*/ '../../../json/film.json',
		      method:'get',
		      rownumbers:true,
		      pagination:true,
		      pageSize:20,
		      pageList:[10,20,30],
		      fitColumns:true,
		      autoRowHeight:true,
		      striped:true,
		      idField:'id',
		      columns:[[
				  {field:'id', title:'Film Id', hidden:true},
		          {field:'title', title:'Film Title'},
		          {field:'actorSet', title:'Actors', formatter:function(value, row){
		              var actors = row.actors;
				  	  var str = '';
				  	  var name;
				  	  for(var i = 0; i < actors.length; i++){
					  	name = actors[i].name.firstName + '_' + actors[i].name.lastName;

						//show 5 actors each sub row
					  	if((i + 1) % 5 === 0){
							str = str + '<br />';
						}
						
						if(i < actors.length - 1){
							str = str + name + ', ';
						}else{
							str = str + name;
						}
					  }
				  	  return str;
		          }},
		          {field:'category', title:'Category', formatter:function(value, row){
		              return row.category.name;
		          }},
		          {field:'language', title:'Language', formatter:function(value, row){
		                  return row.language.name;
		              }}
		          ]]
		      });
  		}); 
	/*]]>*/
    </script>
</head>
<body>
  <a href="../../../index.html" th:href="@{/staff}">Return</a>
  <table></table>
  <!--<table border="1">
    <tr>
      <td>Film Id</td>
      <td>Film Name</td>
      <td>Film Actor</td>
      <td>Category</td>
      <td>Language</td>
    </tr>
    <tr th:each="film : ${films}">
      <td th:text="${film.id}">Film Id</td>
      <td th:text="${film.title}">Film Name</td>
      <td th:text="${film.showActors()}">Actor Name</td>
      <td th:text="${film.category.name}">Category</td>
      <td th:text="${film.language.name}">Language</td>
    </tr>
  </table>-->
</body>
</html>